<template>
  <div class="app-container">
    <!-- 搜索头 -->
    <!-- <transition name="el-zoom-in-top">
      <el-form v-show="searchShow" :inline="true" label-width="80px">
        <el-form-item label="场景名称">
          <el-input v-model="listQuery.title" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearchClick">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="handleSearchCleanClick">清空</el-button>
        </el-form-item>
      </el-form>
    </transition> -->

    <!-- 工具栏 -->
    <div class="tools-container">
      <div class="buttons">
        <!-- <el-row> -->
        <div v-for="(item,index) in title" :key="index" :class="[Number(nowIndex)===Number(index)?'active':'','change']" @click="change(index,item.name)">{{ item.name }}</div>
        <!-- <div class="change">位移传感器</div>
        <div class="change">激光传感器</div>
        <div class="change">超声波气象站</div>
        <div class="change">管式土壤监测</div>
        <div class="change">室内空气监测</div> -->
        <p />
        <!-- </el-row> -->
      </div>
      <!-- <div class="tags"> -->
      <!-- <el-button size="mini" icon="el-icon-search" circle @click="handleSearchShowChange" />
        <el-button size="mini" icon="el-icon-refresh" circle @click="handleRefreshClick" />
        <el-button size="mini" icon="el-icon-menu" circle @click="handleHeaderClick" /> -->
      <!-- </div> -->
    </div>
    <div class="contant">
      <Table :date="dataList" />
    </div>
    <!-- 表头 -->
  </div>
</template>

<script>
import Table from './Table'
import { getData, getIndoorAirThreshold, getOutdoorAirThreshold, getRainThreshold, getSoilThreshold, getLaserThreshold, getCordThreshold } from '@/api/warning'
export default {
  components: {
    Table
  },
  filters: {
    onlineFilter: function(value) {
      const map = ['在线', '离线']
      return map[value]
    }
  },
  props: {
    updateNum: Number
  },
  data() {
    return {
      title: [
      //   { name: '室内传感器', components: Table },
      //   { name: '室外传感器', components: Table },
      //   { name: '激光传感器', components: Table },
      //   { name: '拉绳传感器', components: Table },
      //   { name: '雨量传感器', components: Table },
      //   { name: '土壤传感器', components: Table }
      ],
      nowIndex: 0,
      dataList: [],
      nowCom: Table
    }
  },
  watch: {
    updateNum(n) {
      if (n) {
        this.change(this.nowIndex, this.title[this.nowIndex].name)
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getData().then(res => {
        const a = res.data.map(item => {
          return { name: item }
        })
        this.title = a
        this.change(this.nowIndex, this.title[this.nowIndex].name)
      })
    },
    change(index, name) {
      switch (name) {
        case '室内空气传感器' : this.getThreshold(getIndoorAirThreshold); break
        case '室外空气传感器' : this.getThreshold(getOutdoorAirThreshold); break
        case '雨量传感器' : this.getThreshold(getRainThreshold); break
        case '土壤传感器' : this.getThreshold(getSoilThreshold); break
        case '激光传感器' : this.getThreshold(getLaserThreshold); break
        case '拉绳传感器' : this.getThreshold(getCordThreshold); break
      }
      this.nowIndex = index
    },
    getThreshold(fn) {
      fn().then(res => {
        this.dataList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  width: 100%;
}
.change {
  // width: 151px;
  width: 15%;
  height: 51px;
  background-color: rgb(243, 247, 250);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  // margin-right: 5px;
  cursor: pointer;

}
.active {
    background: #ffffff;
  }
</style>
